<template>
  <div style="height: 100%; width: 100%;">
    <div class="wrap">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input style="width:25%" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

      <el-row style="border: 1px solid black;width: 100%;">
        <el-col style="border: 1px solid green;height: 800px;overflow-y: scroll;" :span="4">
          <div style="border: 1px solid green;height: 80px;line-height:80px;" v-for="(user, index) in userList"
            :key="index">
            {{ user.username }}
          </div>
        </el-col>
        <el-col style="border: 1px solid red;height: 800px;" :span="20">

        </el-col>
      </el-row>

    </div>
  </div>

</template>

<script>

export default {
  data() {
    return {
      form: {
        username: '',
      },
      userList: [
        {
          username: "张三",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "李四",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "王五",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "王五",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "王五",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "王五",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "王五",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "王五",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "王五",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "王五",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "王五",
          info: "在吗",
          timer: "2022/8/9",
        },
        {
          username: "王五",
          info: "在吗",
          timer: "2022/8/9",
        },
      ]

    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    login(val) {
      console.log("login>>>", val);

    },
  },
}
</script>

<style scoped>
.wrap {
  height: 100%;
  width: 100%;
  background-color: #f2f2f2;
  margin: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #dbd9d9;
  border-radius: 3px;
}
</style>